<%--
  Created by IntelliJ IDEA.
  User: 小柒的Java
  Date: 2021/5/12
  Time: 23:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <link rel="shortcut icon" href="#" />
    <script type="text/javascript">
        function doAjax(){
            $.ajax({
                url:"queryServlet",
                dataType:"json",
                success:function (resp) {
                    // 删除旧的数据
                    $("#province").empty();
                    $.each(resp,function (i,n) {
                        $("#province").append("<option value=' "+n.id+" '>"+n.name+"</option>");
                    })
                }
            } )
        }

        $(function () {

            doAjax();

            $("#bunLoad").click(function () {
                doAjax();
            })
            // 改变城市下拉框中的值
            $("#city").change(function () {
                // 获取到省的选中框中的值
                var data=$("#province>option:selected").val();
                // 做ajax请求
                $.post("citySelect",{data:data},comeBack,"json");
            })
        })
        function comeBack(resp){
            // 请求原列表中的值
            $("#city").empty();
            // 遍历获取并填充
            $.each(resp,function (i,n) {
                $("#city").append("<option value='"+n.id+"'>"+n.name+"</option>")
            })
        }
    </script>
</head>
<body>
<table>
    <tr>
        <td>省份名称：</td>
        <td>
            <select id="province">
                <option value="0">请选择...</option>
            </select>
            <input type="button" value="load数据" id="bunLoad"/>
        </td>
    </tr>
    <tr>
        <td>城市:</td>
        <td>
            <select id="city">
                <option value="0">请选择...</option>
            </select>
        </td>
    </tr>
</table>
</body>
</html>

